<template>
    <div class="container">
        <div id="d1"></div>
        <div id="d2">
            
        </div>
        <div id="d3">
        </div>
    </div>

</template>

<style>
        .container{
            position: absolute;
            /* background-color: rgb(23, 22, 59); */
            top:93px; left: 260px; right:100px;bottom: 10px; 
        }
        
        #d1{
            position: absolute;
            top: 0;
            left: 0;
            width: 61%;
            height: 50%;
        }
        #d2{
            position: absolute;
            top: 0; right: 0;
            width: 38%;
            height: 100%;
        }
        #d3{
            position: absolute;
            left: 0; bottom: 0;
            width: 61%;
            height: 48%;
        }
</style>

<script>
export default {
  data () {
    return {
      
    }
  },
  mounted(){
    this.drawLine();
    this.drawLine2();
    this.drawLine3();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('d1'))
        // 绘制图表
        myChart.setOption({
            title: {
                text: '商品一周销售信息'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['西瓜', '苹果', '芒果', '香蕉']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '西瓜',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '苹果',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '芒果',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '香蕉',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                }
            ]
        });
    },
    drawLine2(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('d2'))
        // 绘制图表
        myChart.setOption({
            dataset: [{
                dimensions: ['name', 'age', 'profession', 'score', 'date'],
                source: [
                    [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
                    ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
                    [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
                    ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
                    [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
                    [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
                    ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
                    [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
                    ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
                ]
            }, {
                transform: {
                    type: 'sort',
                    config: { dimension: 'score', order: 'desc' }
                }
            }],
            xAxis: {
                type: 'category',
                axisLabel: { interval: 0, rotate: 30 },
            },
            yAxis: {},
            series: {
                type: 'bar',
                encode: { x: 'name', y: 'score' },
                datasetIndex: 1
            }
        });
    },
    drawLine3(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('d3'))
        // 绘制图表
        myChart.setOption({
            title: {
                text: '各类商品库存',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['西瓜', '苹果', '芒果', '香蕉'   ]
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 公斤'
                }
            },
            series: [
                {
                    name: '数量',
                    type: 'line',
                    data: [888, 666, 555, 686],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        });
    }
  }
}
</script>
